<template>
    <main>
        <div style="width:100%;margin:20px auto;height:400px;">
            <!-- Using the slider component -->
            <slider ref="slider" :options="options">
                <!-- slideritem wrapped package with the components you need -->
                <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{ item.html }}

                </slideritem>
                <!-- Customizable loading -->
                <div slot="loading">loading...</div>
            </slider>
        </div>
    </main>
</template>

<script>
import { slider, slideritem } from 'vue-concise-slider'

export default {
    name: "test",
    components: {
        slider,
        slideritem
    },
    data () {
        return {
            someList:[
                {
                    html: 'slide1',
                    style: {
                        'background': '#1bbc9b',
                        'width': '23.5%',
                        'margin-right': '2%'
                    }
                },
                {
                    html: 'slide2',
                    style: {
                        'background': '#4bbfc3',
                        'width': '23.5%',
                        'margin-right': '2%'
                    }
                },
                {
                    html: 'slide3',
                    style: {
                        'background': '#7baabe',
                        'width': '23.5%',
                        'margin-right': '2%'
                    }
                }
            ],
            //Slider configuration [obj]
            options: {
                currentPage: 0
            },
            current: 0,
            data: [
                {
                    number: 4,
                    desc: '国家专线采购来源',
                    title: '国际专线直通全球多点',
                    container: '花卷国际专线采购来源覆盖中国电信、中国联通、腾讯云、阿里云、PCCW 等中国与海外大型互联网基础服务提供商。集众多优质资源于一身，为客户提供最适合的服务。目前，花卷国际专线可直达洛杉矶、东京、首尔、中国香港、法兰克福。'
                },
                {
                    number: 16,
                    desc: '主流数据交换中心会员',
                    title: '花卷网络海外覆盖 16 家主流数据交换中心',
                    container: '花卷网络海外可达位于亚洲、美西、美东、美中、拉丁美洲、欧洲的 16 家大型互联网交换中心。通过花卷网络与全球内容提供商 / 运营商交换数据更快速。目前可达 HKIX，Equinix HK，Any2 Los angeles，Seattle IX，AMS-IX，DE-CIX（Dusseldorf/Frankfurt/Munich/Hamburg），LINX（London），LoNAP，PTT São Paulo，PITER-IX，Data IX，Global-IX，KCIX。'
                },
                {
                    number: 200,
                    desc: '带宽资源',
                    title: '100Gbps 带宽资源覆盖全球多地',
                    container: '位于中国、亚洲、美西、美东、美中、拉丁美洲、欧洲的 16 家大型互联网交换中心带宽已达200 Gbps。'
                },
                {
                    number: 16,
                    desc: '国家专线采购来源',
                    title: '国际专线直通全球多点',
                    container: '花卷国际专线采购来源覆盖中国电信、中国联通、腾讯云、阿里云、PCCW 等中国与海外大型互联网基础服务提供商。集众多优质资源于一身，为客户提供最适合的服务。目前，花卷国际专线可直达洛杉矶、东京、首尔、中国香港、法兰克福。'
                }
            ]
        }
    },
    methods: {

    },
    mounted () {

    },
    computed: {}
}
</script>

<style scoped lang="scss">

</style>
